<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="utf-8">
	<title>helloVue2</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="./js/flexible.js"></script>
	<link rel="stylesheet" href="./css/quchengshi.css">
</head>

<body>
	<div id="app">
		<div class="Headsc">
			<div class="HeadscL">
			</div>
			<div class="HeadMind">
				<img
					src="">
				<span>保湿面膜0.1元</span>
			</div>
			<div class="HeadscR">
				<img
					src="">
			</div>
		</div>
		<div class="Headselect">
			<ul>
				<ll>
					<div class="Headselectdiv att">今日推荐</div>
				</ll>
				<ll>
					<div class="Headselectdiv">面膜中心</div>
				</ll>
			</ul>
		</div>
		<tuijian></tuijian>
	</div>
	<template id="tuijian">
		<div class="bodyBox">
			<div class="bodyHead">
			</div>
			<div class="bodyHeadselect">
				<ul>
					<li v-for="(item,index) in Liselect" :class="item.myclass" @click="seLi(index)">{{item.text}}</li>
				</ul>
				<span class="xian" :style="xianL"></span>
			</div>
			<div class="bodymind">
				<ul>
					<li v-for="item in List" class="bodymindLi">
						<img :src="item.over_image_url">
						<div class="bodymindfont">
							{{item.item_name}}
						</div>
						<div class="money">
							￥{{(item.max_app_price)/100}}
						</div>
						<button>立即购买</button>
					</li>
				</ul>
				<div class="kongbai">
					
				</div>
			</div>
		</div>
	</template>
	<script src="./js/axios.js"></script>
	<script src="./js/vue.js"></script>
	<script>
		const bus = new Vue()

		var tuijian = {
			data:function(){
				return{
					List:[],
					xianL:"left:8.33333%",
					select:[{"myclass":"bodyHeadselectLi","text":"当季爆款"},{"myclass":"","text":"美白秘籍"},{"myclass":"","text":"屈家热卖"}]
				}
			},
			mounted() {
				bus.$on("Mylist", (data) => {
					this.List = data.item_list;
					console.log(this.List)
				})
			},
			computed:{
				Liselect:function(){
					return this.select
				}
			},
			methods:{
				seLi:function(data){
					this.select.forEach((item,index)=>{
						if(index === data){
							if(index === 0){
								this.xianL="left:8.33333%"
							}else if(index === 1){
								this.xianL="left:41.6667%"
							}else if(index === 2){
								this.xianL="left:75%"
							}
							item.myclass="bodyHeadselectLi"
							console.log(this.xianL)
						}else{
							item.myclass=""
						}
					})
					this.List = []
					axios.get("./data.json").then(res => {
						this.list = res.data.data
						bus.$emit("Mylist", this.list)
					})
				}
			},
			template: "#tuijian"
		}

		let app = new Vue({
			el: "#app",
			data: {
				list: []
			},
			components: {
				tuijian
			},
			mounted() {
				axios.get("./data.json").then(res => {
					this.list = res.data.data
					bus.$emit("Mylist", this.list)
				})
			}
		})
	</script>
</body>

</html>